<template>
  <div>
    <strong class="header-left">智慧校园综合服务系统</strong>




    <div class="header-right">




      <el-popover placement="bottom" width="400" trigger="click">



        <el-menu class="el-menu-demo">



          <el-menu-item index="1">{{ UserInfo.username }}</el-menu-item>

          <el-submenu index="2">

            <template slot="title">个人中心</template>
            <router-link to="/home/changeinfo">
              <el-menu-item index="2-1">修改资料</el-menu-item>
            </router-link>
            <el-menu-item index="2-2" @click="logout">退出</el-menu-item>

          </el-submenu>

          <el-menu-item index="3" @click="open1">消息通知</el-menu-item>


          <!-- <el-menu-item index="4">
  <router-link to="/home/author">信息</router-link>
</el-menu-item> -->

        </el-menu>





        <el-button slot="reference" class="AvatarB"><el-avatar shape="square" :src="img"></el-avatar></el-button>
      </el-popover>





    </div>

  </div>
</template>

<script>
import { request } from '@/axios/request'
import imgUrl from '../../static/image/001.png'
export default {
  name: "Header",
  data() {
    return {
      dialogVisible: false,
      lives: null,
      UserInfo: {
        id: 0,
        username: null,
        portrait: null
      },
      img: null
    }
  },
  methods: {


    open1() {
      this.getNew();
    },
    getNew() {
      request({
        url: '/notice/new',
        method: 'get'
      }).then(res => {
        /*this.$notify({
          title: res.data.object[0].title,
          message: '请去公告管理栏查看详情',
          duration: 0
        });*/
        const h = this.$createElement;

        this.$notify({
          title: res.data.object[0].title,
          message: h('i', { style: 'color: teal' }, '详情请去公告管理栏查看')
        });
      })

    },
    open2() {

      /*  request({
          url:'/',
          method:'get'
        }).then(res=>{

        })*/

      this.$notify({
        title: '提示',
        message: '这是一条不会自动关闭的消息',
        duration: 0
      });
    }
    ,
    getUserInfo() {
      request({
        url: '/user',
        method: 'get'
      }).then(res => {
        this.UserInfo.id = res.data.object.id;
        this.UserInfo.username = res.data.object.username;
        this.UserInfo.portrait = res.data.object.avatar;
        console.log(res.data.object.avatar);


      })
    },
    logout() {
      request({
        url: 'logout',
        method: 'post',
      }).then(res => {
        this.$message({
          message: res.data.Msg,
          type: 'success'
        })
        localStorage.clear()
        sessionStorage.clear()

        this.$store.commit("resetState")

        this.$router.push("/login")
      })

    }
  },
  created() {
    this.getUserInfo()


    this.getNew();

    this.img = imgUrl;
  },


};
</script>

<style scoped>
/* .el-menu-demo {
  background-color: #b3c0d1;
} */
.header-left {
  float: left;
  font-size: 25px;
}

.header-right {
  float: right;
  /* width: 450px; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.AvatarB {
  background-color: white;
  border: none;
}
</style>
